<div class="header-container" style="margin-top: 40px">
    <br><br>
    <div class="text-center"><h1 style="color: aliceblue">CubeAI ★ 智立方</h1></div>
    <div class="text-center"><h1 style="color: aliceblue">中国联通AI模型共享与能力开放实验床</h1></div>
    <br>
    <div class="text-center">
        <div>
            <button mat-raised-button color="primary" (click)="login()">
                <span class="fa fa-sign-in">&nbsp;登录</span>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button mat-raised-button color="primary" (click)="registerUser()">
                <span class="fa fa-user-plus">&nbsp;注册</span>
            </button>
        </div>
    </div>
    <br><br>
</div>

<div class="row justify-content-center">
    <div class="row">
        <mat-card style="margin: 30px 0 0 0; width: 960px">
            <div [innerHTML]="homepageIntro | html">
            </div>
        </mat-card>
        <mat-card style="margin: 30px 0 0 0; width: 360px" class="pull-right">
            <div [innerHTML]="homepageNews | html">
            </div>
        </mat-card>
    </div>

    <mat-card style="margin: 30px 30px 0 30px; width: 1320px">
        <div [innerHTML]="homepageArch | html">
        </div>
    </mat-card>

    <mat-card style="margin: 30px 30px; width: 1320px">
        <div class="row">
            <div *ngFor="let solution of solutions; trackBy: trackIdentity">
                <mat-card class="solution-card pull-right">
                    <mat-card-header class="solution-card-header">
                        <mat-card-title class="solution-card-title">
                            {{solution.name}}
                            <div class="pull-right" *ngIf="false">
                                <a matTooltip="删除"><span>x</span></a>
                            </div>
                        </mat-card-title>
                        <mat-card-subtitle>
                            <span>{{solution.authorLogin}}</span>
                            <div class="pull-right">
                                <span>{{solution.createdDate | date:'yyyy-MM-dd'}}</span>
                            </div>
                        </mat-card-subtitle>
                    </mat-card-header>
                    <div class="solution-card-image">
                        <a (click)="viewSolution(solution)">
                            <img mat-card-image src="{{solution.pictureUrl}}" *ngIf="solution.pictureUrl">
                            <img mat-card-image src="../../../content/images/solution/default.jpg" *ngIf="!solution.pictureUrl">
                        </a>

                    </div>
                    <mat-card-content class="solution-card-content">
                        <span class="fa fa-star-o" matTooltip="点评数">{{solution.ratingCount}}</span>
                        <div class="star-bg pull-right" matTooltip="点评星级：{{solution.ratingAverage}}">
                            <div class="star-over" [ngStyle]="{'width': getRatingWidth(solution.ratingAverage)}"></div>
                        </div>
                        <div style="margin-top: 2px">
                            <span class="fa fa-eye" matTooltip="浏览量">{{solution.viewCount}}</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="fa fa-download" matTooltip="下载量">{{solution.downloadCount}}</span>
                            <div class="pull-right">
                                <span class="fa fa-commenting-o" matTooltip="评论数">{{solution.commentCount}}</span>
                            </div>
                        </div>
                    </mat-card-content>
                </mat-card>
            </div>
        </div>
        <br>
        <div *ngIf="solutions.length > 0">
            <mat-paginator #paginator
                           [length]="totalItems"
                           [pageSize]="itemsPerPage"
                           [pageSizeOptions]="pageSizeOptions"
                           (page)="reloadPage($event)"
                           showFirstLastButtons>
            </mat-paginator>
        </div>
    </mat-card>

    <mat-card style="margin: 0 30px 30px 30px; width: 1320px">
        <div [innerHTML]="homepagePartners | html">
        </div>
    </mat-card>
</div>
<br>

